<template>
    <div>
        <!-- count:实质Ref对象,模版在使用的时候自动'解包',取它的value数值 -->
        <h1>组合式API函数之ref->{{ count }}</h1>
        <button @click="handler">点击我+2</button>
    </div>
</template>
<script lang="ts">
import { defineComponent, ref } from 'vue';

//ref确实是一个函数,函数执行一般传递的是基本类型数据
//ref函数执行返回的是一个Ref对象,value属性的属性值即为传递的基本类型数据
export default defineComponent({
    name: 'App',
    setup() {
        //利用ref创建一个Ref对象
        const count = ref(100);
        return {
            count,
            handler() {
                //切记:Ref对象在JS区域操作的时候,不会自动'解包',手动书写!!!!
                count.value += 2;
            }
        }
    }
})
</script>